<template>
  <!-- <keep-alive> -->
  <div class="list-wrap">
    <div>
      <ListRated />
      <ListMovies @finish="finish" ref="movies" @more="more" />
      <p v-if="show">没有更多了</p>
    </div>
  </div>
  <!-- </keep-alive> -->
</template>

<script>
import ListRated from "./components/ListRated.vue";
import ListMovies from "./components/ListMovies.vue";
import BScroll from "better-scroll";
// import { moviesMoreApi } from "@/utils/api";

let bs;
export default {
  data() {
    return {
      show: false,
    };
  },
  components: {
    ListRated,
    ListMovies,
  },
  methods: {
    finish() {
      bs = new BScroll(".list-wrap", {
        scrollX: false,
        scrollY: true,
        click: true,
        // 现在已经可以监听到滚到底了
        pullUpLoad: true,
      });
      bs.on("pullingUp", () => {
        // console.log("我被拉到底了");
        // const res = await moviesMoreApi({
        //   ids: "1228788,247294",
        // });
        // console.log(res);
        this.$refs.movies.getMore();
      });
    },
    more(done) {
      console.log(done);
      // 重新计算bs的高度
      bs.refresh();
      // 告诉bs，这一次的加载结束了，可以进行下一次的了
      if (!done) {
        bs.finishPullUp();
      } else {
        this.show = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.list-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
